<template>
  <teleport to="#messBox">
    <div class="mess-container fixed-top mt-2 w-50 mx-auto" v-if="isMess">
      <div class="alert d-flex justify-content-between" :class="classObj" role="alert">
        {{mess}}
        <button type="button" aria-label="Close" class="btn-close" @click.prevent="closeClick"></button>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import { useCreateNode } from '../hooks/usecreateNode'
export type messType = 'success' | 'error' | 'default'
export default defineComponent({
  name: 'Message',
  props: {
    mess: {
      type: String
    },
    type: {
      type: String as PropType<messType>,
      default: 'default'
    }
  },
  setup (props, context) {
    useCreateNode('messBox')
    const isMess = ref(true)
    const classObj = {
      'alert-primary': props.type === 'default',
      'alert-success': props.type === 'success',
      'alert-danger': props.type === 'error'

    }
    const closeClick = () => {
      isMess.value = false
      context.emit('close-message', true)
    }

    return { isMess, classObj, closeClick }
  }
})
</script>
